import React, { useState, useEffect } from 'react';
import { Card, Button } from 'antd';
import { useAuthStore } from '../../stores/authStore';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import { userApi, User } from '../../services/userApi';
import { notification } from '../common'; // 导入自定义通知组件
import PersonalInfoCard from './PersonalInfoCard';
import PersonalDetailCard from './PersonalDetailCard';

const ProfileContent: React.FC = () => {
  const authStore = useAuthStore();
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const [userProfile, setUserProfile] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  // 获取用户详细信息
  const fetchUserProfile = async () => {
    try {
      console.log('=== 开始获取用户信息 ===');
      setLoading(true);
      const profile = await userApi.getCurrentUser();
      console.log('从API获取到的原始用户信息:', profile);
      setUserProfile(profile);
      console.log('设置后的用户信息:', profile);
      console.log('=== 用户信息获取完成 ===');
    } catch (error) {
      console.error('获取用户信息失败:', error);
      // 使用自定义通知组件替换 message.error
      notification.error({
        title: '获取用户信息失败',
        message: error instanceof Error ? error.message : '未知错误'
      });
      setUserProfile(null);
    } finally {
      setLoading(false);
    }
  };

  // 更新用户信息的处理函数
  const handleUpdateProfile = async (updatedData: Partial<User>) => {
    try {
      if (!userProfile) {
        throw new Error('用户信息未加载');
      }
      
      // 调用 API 更新用户信息
      const updatedUser = await userApi.updateUser(userProfile.id, updatedData);

      // 更新本地状态
      setUserProfile(updatedUser);

      // 使用自定义通知组件替换 message.success
      notification.success({
        title: '信息更新成功',
        message: '用户信息已成功更新'
      });

      // 重新获取最新数据
      await fetchUserProfile();
    } catch (error) {
      console.error('更新用户信息失败:', error);
      // 使用自定义通知组件替换 message.error
      notification.error({
        title: '更新失败',
        message: error instanceof Error ? error.message : '未知错误'
      });
      throw error; // 重新抛出错误以便组件处理
    }
  };

  useEffect(() => {
    console.log('ProfileContent组件已挂载，开始获取用户信息');
    fetchUserProfile();
  }, []);

  // 如果正在加载用户信息，显示加载状态
  if (loading) {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        background: theme.contentBackground
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            width: '48px',
            height: '48px',
            borderRadius: '50%',
            border: `4px solid ${theme.borderColor}40`,
            borderTopColor: theme.glowColor,
            margin: '0 auto 16px',
            animation: 'spin 1s linear infinite'
          }}></div>
          <p style={{ color: theme.textSecondary }}>正在加载用户信息...</p>
        </div>
        <style>{`
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        `}</style>
      </div>
    );
  }

  // 如果没有用户信息，显示错误或空状态
  if (!userProfile) {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        background: theme.contentBackground
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '48px', marginBottom: '16px' }}>👤</div>
          <h3 style={{ color: theme.textPrimary, marginBottom: '8px' }}>无法加载用户信息</h3>
          <p style={{ color: theme.textSecondary, marginBottom: '16px' }}>
            获取个人信息时出现错误，请稍后重试
          </p>
          <Button
            type="primary"
            onClick={fetchUserProfile}
            style={{ 
              backgroundColor: theme.glowColor, 
              borderColor: theme.glowColor,
              color: '#fff'
            }}
          >
            重新加载
          </Button>
        </div>
      </div>
    );
  }

  // 扩展用户信息以包含更多详细字段（模拟数据，实际应从API获取）
  const extendedUserProfile = {
    ...userProfile,
    // 基本信息
    email: userProfile.email || 'user@example.com',
    phone: userProfile.phone || undefined,
    location: userProfile.location || undefined,
    bio: userProfile.bio || undefined,

    // 工作信息
    department: userProfile.department || undefined,
    employee_id: userProfile.employee_id || undefined,

    // 系统信息
    language: userProfile.language || '中文',
    timezone: userProfile.timezone || 'Asia/Shanghai',

    // 安全信息
    is_verified: userProfile.is_verified !== undefined ? userProfile.is_verified : true,
    login_count: userProfile.login_count || 0,

    // 时间信息
    created_at: userProfile.created_at || new Date().toISOString(),
    updated_at: userProfile.updated_at || new Date().toISOString(),
    last_login: userProfile.last_login_at || userProfile.last_login || new Date().toISOString(),

    // 技能标签（示例）
    skills: userProfile.skills || ['React', 'TypeScript', 'Node.js', 'Python'],

    // 资料完整度（只有当API没有返回该值时才使用默认值）
    profile_completion: userProfile.profile_completion,
  };

  console.log('渲染完整个人信息页面', { userProfile: extendedUserProfile });

  return (
    <div style={{
      padding: '24px',
      background: theme.contentBackground,
      minHeight: '100vh',
    }}>
      <h1 style={{
        color: theme.textPrimary,
        fontSize: '28px',
        fontWeight: 'bold',
        marginBottom: '32px',
        display: 'flex',
        alignItems: 'center',
      }}>
        <span style={{
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: '40px',
          height: '40px',
          borderRadius: '12px',
          background: `linear-gradient(135deg, ${theme.glowColor}20 0%, ${theme.glowColor}10 100%)`,
          marginRight: '12px',
          fontSize: '24px'
        }}>
          👤
        </span>
        个人中心
      </h1>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(300px, 400px) 1fr',
        gap: '24px',
        alignItems: 'start'
      }}>
        {/* 左侧：头像和基本信息 */}
        <div style={{
          position: 'sticky',
          top: '24px'
        }}>
          <PersonalInfoCard
            avatarUrl={extendedUserProfile.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=400&h=400&fit=crop&crop=face'}
            name={extendedUserProfile.full_name || extendedUserProfile.username}
            title={extendedUserProfile.is_superuser ? '超级管理员' : '普通用户'}
            handle={extendedUserProfile.username}
            status={extendedUserProfile.is_active ? '活跃' : '禁用'}
            contactText="编辑头像"
            onContactClick={() => {
              // 这里可以添加编辑头像的逻辑
              console.log('编辑头像');
              // 使用自定义通知组件替换 message.info
              notification.info({
                title: '功能开发中',
                message: '头像编辑功能正在开发中'
              });
            }}
            showUserInfo={true}
            miniAvatarUrl={extendedUserProfile.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=400&h=400&fit=crop&crop=face'}
          />
        </div>

        {/* 右侧：详细信息卡片 */}
        <PersonalDetailCard
          userProfile={extendedUserProfile}
          onUpdate={handleUpdateProfile}
        />
      </div>
    </div>
  );
};

export default ProfileContent;